<div class="row">
	<div class="col-xs-12">
		<div class="box">
		<div class="box-header">
                <div class="input-group input-group-sm">
                  <a href="javascript:void(0);" class="btn btn-primary addApplication">新增 Application</a>
                </div>
            </div>
			<!-- /.box-header -->
			<div class="box-body">
				<table id="appTable" class="table table-bordered table-hover"
					style="font-size: 12px;" width="100%">
					<thead>
						<tr>
							<th>Name</th>
							<th>Owner</th>
							<th>Version</th>
							<th>K8 version</th>
							<th>Actions</th>
						</tr>
					</thead>
				</table>
			</div>
			<!-- /.box-body -->	
		</div>
		<!-- /.box -->
	</div>
	<!-- /.col -->
</div>
<!-- /.row -->
<script type="text/javascript">
    var table = $('#appTable').DataTable({
        "ajax":"/getApplications",
        "columns": [
					{ "data": "name" },
        			{ "data": "owner" },
        			{ "data": "version" },
        			{ "data": "k8sVersion" },
					{ "defaultContent": "<button class='btn btn-primary btn-sm view'>View</button>&nbsp;<button class='btn btn-primary btn-sm update'>Update</button>&nbsp;<button class='btn btn-primary btn-sm deploy'>Deploy</button>"}
        		]
    });
	
	$('.addApplication').click( function() {
		$('.content').load('add_application.html');
    } );
	
	$('#appTable tbody').on( 'click', 'button.update', function () {
		var data = table.row($(this).parents('tr')).data();
		$('.content').load('build_application.html');
		sessionStorage.setItem("appID", data['id']);
    } );
	
	$('#appTable tbody').on( 'click', 'button.view', function () {
		var data = table.row($(this).parents('tr')).data();
        $('.content').load('view_application.html');
		sessionStorage.setItem("appID", data['id']);
    } );
	
	$('#appTable tbody').on( 'click', 'button.deploy', function () {
		var data = table.row($(this).parents('tr')).data();
        
		$.ajax({
				url: "/deployApplication",
				type: "POST",
				dataType: "json",
				data: {
					id:data['id']
				},
				success: function(response){
					if(response['status'] > -1)
					{
						var _name = data['name']
						var _div = $('<div>');
						_div.load('alert_success.html', function(){
							$(this).find('#title').html(response['message']);
							$(this).find('#message').html("Project <strong>" + _name + "</strong> deployed successfully.");
							var child = $(this).children();
							child.fadeTo(3000, 500).slideToggle(500, function(){
								child.alert('close');
							});
							$('.content').append(child);
						});
					}
					else
					{
						var _div = $('<div>');
						_div.load('alert_error.html', function(){
							$(this).find('#title').html("ERROR");
							$(this).find('#message').html(response['message']);
							var child = $(this).children();
							child.fadeTo(3000, 500).slideToggle(500, function(){
								child.alert('close');
							});
							$('.content').append(child);
						});
					}
				}
			});
    } );
	
	$('input', $('#appModal')).focusout(function() {
		setFormTips(this);
	});
	
	$('#appModal').on('hidden.bs.modal', function () {
		$(this).find('input,textarea,select').val('').end();
		$(this).find('.form-group').removeClass('has-error').removeClass('has-success').end();
		$(this).find(".formtips").remove().end();
		$('#addResult').hide();
	});
	
	function setFormTips(field)
	{
		$(field).parent().find('.formtips').remove().end();
		var v = $(field).val();
		if(v === '')
		{
			$(field).closest('.form-group').addClass('has-error');
            $(field).parent().append('<span class="formtips" style="color:#dd4b39">不能为空!</span>');
		}
		else
		{
			$(field).closest('.form-group').removeClass('has-error').addClass('has-success');
		}
	}
	
	function checkInput(){
		var ret = true;
		$('input', $('#appModal')).each(function () {
			if($(this).val() === '')
			{
				setFormTips(this);
				ret = false;
			}
		});
		return ret;
	}
</script>
